<template>
  <div class="body">
    <div class="contant">
      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <div class="xcbs_box" v-for="(v,index) of list" :keys="index" @click="btn(v)">
          <div class="xcbs_child">
            <img class="img_persons" v-if="v.patrolTroubleshootId>0||(v.patrolTroubleshootId==0&&v.noweInfoId>0)" src="../../assets/images/logo5.png" />
            <img class="img_persons" v-if="v.commitId>0" src="../../assets/images/rwls.png" />
            <div class="xcbs_suns">
              <div class="xcbs_tit">{{v.unitsName}}</div>
              <div class="xcbs_sun">
                <img
                  v-show="getStatus(v.isRectifica)=='黄灯'&&!(v.commitId>0)"
                  class="yh_light"
                  src="../../assets/images/jsd.gif"
                />
                <img
                  v-show="getStatus(v.isRectifica)=='勾'&&!(v.commitId>0)"
                  class="yh_light"
                  src="../../assets/images/lg.png"
                />
                <img class="img_people" src="../../assets/images/people.png" />
                <div>{{v.ptPerson}}</div>
              </div>
            </div>
          </div>
          <div class="time">{{v.niAddtime}}</div>
        </div>
      </van-list>
      <!-- </van-pull-refresh> -->
    </div>
  </div>
</template>

<script>
// import  Tabbar from '../../tabbar'
export default {
  name: "ybjc_list",
  data() {
    return {
      userId: null, //用户id
      list: [],
      where: "",
      leibielist: [], //方式
      loading: false, //加载状态结束false
      finished: false, //全部加载完成true
      error: false, //出错状态
      refreshing: false, //是否下拉加载 是true
      cunt: 1,
      yinchang: false,
      scroll: 0,
      total: null,
      src: "",
      dwId: "",
    };
  },
  components: {
    // Tabbar
  },
  methods: {
    toback() {
      this.$router.push("/index");
    },
    getStatus(status) {
      var str = "";
      if (status || status === 0) {
        if (status === 1 || status === 3 || status === 6) {
          str = "勾";
        } else {
          str = "黄灯";
        }
      }
      return str;
    },
    btn(v) {
      console.log(v);
      /*var jdjc_detail_params = {
        from: "/tongji_3",
        patrolTroubleshootId: v.patrolTroubleshootId,
        patrolTroubleshootInfoId: v.patrolTroubleshootInfoId,
      };
      localStorage.setItem(
        "jdjc_detail_params",
        JSON.stringify(jdjc_detail_params)
      );
      this.$router.push("/jdjc_detail");*/

      sessionStorage.setItem("inspection_patrolTroubleshootId", v.patrolTroubleshootId);
      sessionStorage.setItem("inspection_infoId", (v.patrolTroubleshootInfoId||v.patrolTroubleshootInfoId===0)?v.patrolTroubleshootInfoId:'');
      localStorage.setItem("hard_detail_from",'/tongji_3');
      if (v.patrolTroubleshootId>0) {
        // this.$router.push("/hard_detail");
        // sessionStorage.setItem("inspection_patrolTroubleshootId", ptId);
        // sessionStorage.setItem("inspection_infoId", infoId);
        this.$router.push("/hard_detail");
      } else if (v.patrolTroubleshootId==0&&v.noweInfoId>0){
        this.$router.push({
          path: "/ptlook",
          query: { id: v.noweInfoId, ids: 14 },
        });
      }else if(v.patrolTroubleshootId==0&&v.noweInfoId==0){
         this.$router.push({
          path: "/jdjc_luoshi",
          query: { id: v.commitId },
        });
      }
    },
    getlist() {
      // try {
      //   plus.nativeUI.showWaiting("正在加载...");
      // } catch (e) {
      //   console.log(e.message);
      // }
      this.axios
        .get(
          `${
            this.$global_msg.Url.host
          }/monitoringPlan/planList?userId=${this.userId}&dwId=${
            this.dwId
          }&type=${1}&page=${this.cunt}&pageSize=10`,
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
          console.log(res);
          console.log("=================");
          if(res.data.code == 200){
          if (res.data.rows.total == 0) {
            this.loading = false;
            this.$toast("暂无数据");
            this.finished = true;
            return false;
          }
          for (var i of res.data.rows.list) {
            // this.list=res.data.rows.list
            this.list.push(i);
          }
          this.total = res.data.rows.total;

          this.cunt += 1;
          // 加载状态结束
          this.loading = false;
          console.log(this.list.length);
          if (this.total < this.list.length || this.total == this.list.length) {
            this.finished = true;
            console.log("加载完毕");
          }
          }else{
            this.$toast(res.data.msg)
          }
        }).catch(err=>{
              this.$terminal._error(err)
          })
    },

    onLoad() {
      // 异步更新数据
      // this.yc = true
      if (this.refreshing) {
        this.list = [];
        this.cunt = 1;
        this.refreshing = false;
      }
      // for (let i = 0; i < 20; i++) {
      //   this.list.push(this.list.length + 1);
      // }
      this.getlist();

      // 出错
      // if (this.cunt >= 2) {
      //     this.error = true;
      // }
      // 数据全部加载完成
    },
    onRefresh() {
      console.log("下拉");
      // 清空列表数据
      this.finished = false;
      // this.yc=false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.cunt = 1;
      this.onLoad();
    },
  },
  mounted() {
    document.body.style.backgroundColor = "#F7F7F9";
  },
  created() {
    this.userId = localStorage.getItem("userId"); //获取访问id
    console.log(this.userId);
    if (sessionStorage.getItem("index_rank") != 3) {
      this.dwId = sessionStorage.getItem("tongji_2_id");
    }
  },
};
</script>

<style scoped>
/* 头部开始 */
.header {
  height: 1.8519rem;
  background: #007aff;
  padding-top: 0.8333rem;
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 20;
  font-size: 0.388888rem;
}

.title {
  padding: 0 0.3704rem;
  display: flex;
  align-items: center;
  color: #fff;
}

.btn-change {
  position: absolute;
  left: 1.537037rem;
  font-size: 0.488888rem !important;
  bottom: 0px;
  top: 0.15rem;
  width: auto !important;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.title > div {
  width: 100%;
  font-size: 0.4444rem;
  text-align: center;
}

.img_zuo {
  width: 0.2593rem;
  height: 0.463rem;
}

/* 头部结束 */
.posi {
  display: flex;
  flex-wrap: wrap;
  position: fixed;
  top: 1.8519rem;
  width: 100%;
  background: #fff;
  z-index: 10;
}

.styles {
  display: inline-block;
  /* border: 1px solid blue; */
  width: 19.6%;
  font-size: 0.25rem;
  margin-bottom: 0.2rem;
}

.hdgd {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.hdgd div {
  display: inline-block;
}

.styles div {
  margin-top: 0.1rem;
}

.rvvee {
  width: 100%;
}

.stylebox {
  background: white;
  padding: 0.37037rem;
  box-sizing: border-box;
  /* border: 1px solid red; */
}

.img_log6 {
  width: 0.8rem;
  display: inline-block;
}

.img_people {
  width: 0.3519rem;
  margin-right: 0.2rem;
  height: 0.3519rem;
}

.xcbs_suns {
  width: 85%;
  /* border: 1px solid red; */
  margin-left: 0.3rem;
  margin-top: 0.15rem;
}

.xcbs_sun {
  display: flex;
  align-items: center;
  font-size: 0.296296rem;
  color: #999;
  margin-top: 0.092592rem;
}

.time {
  font-size: 0.35rem;
}

.xcbs_tit {
  font-size: 0.35rem;
  width: 100%;
  /* border: 1px solid red; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.img_persons {
  width: 0.6667rem;
  height: 0.7407rem;
}

.xcbs_child {
  /* border: 1px solid blue; */
  width: 85%;
  display: flex;
  align-items: center;
}

.listvr {
  margin-top: 0.2rem;
}

.xcbs_box {
  display: flex;
  justify-content: space-between;
  height: 1.388888rem;
  border-radius: 0.15rem;
  align-items: center;
  background-color: white;
  padding: 0 0.4rem;
}

.listvr_tit {
  border-radius: 0.15rem;
  padding: 0 0.4rem;
  height: 0.8rem;
  background-color: white;
  line-height: 0.8rem;
  border-bottom: 1px solid #dddddd;
}

.header {
  height: 1.8519rem;
  background: #007aff;
  padding-top: 0.8333rem;
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 20;
  font-size: 0.388888rem;
}

.title {
  padding: 0 0.3704rem;
  display: flex;
  align-items: center;
  color: #fff;
}

.title > div {
  width: 100%;
  font-size: 0.4444rem;
  text-align: center;
}

.img_zuo {
  width: 0.2593rem;
  height: 0.463rem;
}

.img_big {
  width: 0.629629rem;
}
.yh_light{
    width: 0.37037rem !important;
    height: 0.37037rem !important;
    margin-right: 0.2rem;
  }
</style>
